<template>
  <div class="box">
    <div class="top">
      <span>电影列表</span>
      <span>
        <el-input
          v-model="keyword"
          placeholder="输入影院名"
          
        >
          <template #append>
            <el-button :icon="Search" @click="sou" type="primary"/>
          </template>
        </el-input>
      </span>
    </div>
    <el-table :data="list" style="width: 100%; height: 400px">
      <el-table-column type="index" label="序号" align="center" />
      <el-table-column prop="name" label="电影院" align="center" />
      <el-table-column prop="city_name" label="所在城市" align="center" />
      <el-table-column prop="district_name" label="所在地区" align="center" />
      <el-table-column prop="address" label="具体地址" align="center" />
      <el-table-column label="状态" align="center">
        <template #default="scope">
          <div
            style="display: flex; align-items: center; justify-content: center"
          >
            <el-tag type="danger">暂停营业</el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      @current-change="getlist"
      :hide-on-single-page="flang"
      v-model:current-page="count"
    />
  </div>
</template>

<script setup>
import {
  Search
} from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";
import { getmovelist ,getsoumovelist} from "../../service/user";
let keyword=ref("");
let list = ref([]);
//请求参数
let count = ref(1);
//分页器
let page = ref(1);
//后端分页
let total = ref(0);
let flang = ref(false);

onMounted(() => {
  getlist();
});
//获取列表
function getlist() {
  getmovelist(count.value).then((res) => {
    console.log(res.data.paginate.data);
    list.value = res.data.paginate.data;
    total.value=res.data.paginate.last_page*10;
  });
}
//搜索
function sou(){
  getsoumovelist({keyword:keyword.value,page:count.value,}).then((res)=>{
    console.log(res.data)
    list.value = res.data.paginate.data;
    total.value=res.data.paginate.last_page*10;
  })
  keyword.value=""
}
</script>

<style lang="scss" scoped>
.box {
  padding: 10px;
  box-sizing: border-box;
  background-color: white;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  .top {
    border: 1px solid #ccc;
    margin: 5px;
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
    font-weight: 700;
    font-size: 20px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
